<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="news">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
    <input type="text" name="ddd"/>
    <input type="text" name="ddd"/>
    <input type="text" name="ddd"/>
    <script>
        /*
            1.获取一个元素
                - 通过js代码来获取页面中的标签
                - 获取到以后我们就可以操作这些标签了
        */

        /*
            html，head，body是非常规的元素，所以获取方式也比较特殊
        */ 
       console.log(document.documentElement);//这个其实多用于rem布局
       console.log(document.head);//获取head
       console.log(document.body);//获取body

        /*
            获取常规元素的方式有很多，一般通过id、class、tagName、name
        */    

        // document.getElementById()  通过id获取元素。注意你手贱设置了多个同样id的元素，这个只会获取到第一个
        console.log(document.getElementById('news'));

        // document.getElementsByClassName()  通过className也就是类名获取元素，不过要注意，这个方法会获取到所有符合条件的元素，最终返回一个伪数组，什么叫伪数组呢？就是长得像个数组，但是很多数组能用的方法它都不能用，比如filter、some、forEach...。我们可以利用Array.from()将伪数组转变为数组
        console.log(document.getElementsByClassName('item'))

        // document.getElementByTagName()  通过标签名称获取所有符合条件的元素合集伪数组
        console.log(document.getElementsByTagName('li'));

        // document.getElementsByName()  通过标签的name属性获取元素伪数组合集，不过要注意，我们一般只有input标签才会给这个name属性，而且这个方法用的也真的不是很多，所以知道就好
        console.log(document.getElementsByName('ddd'));
    </script>
</body>
</html>